<template>
	<view  class="bg-white">
		<cu-custom title="编辑成功案例"></cu-custom>
		<view class="bg-white p-15">
			<text style="line-height: 25px;">优秀的成功案例可以快速让学生和家长了解老师的实力,如:2013年成功培养7个学生考进清华,用3个月时间将15个学生中考成绩平均提高25分,让4个学生获得全国奥数比赛一等奖等等
</text>

		</view>
		<view class="case-detail">
		<view class="form-detail " > 
			<view class="l-m-b l-m-l f-w-b flex">
				<text class="case-dot f-l"></text>
				<text class="case-text f-l">成功案例一</text>
			</view>
					
		</view>
		<view class="case-p bg-white p-15">
			<input placeholder="请输入个人标签,10个字以内" class=" c-l m-10 " maxlength="10" @input="descInput" 
                v-model="dataInfo"/>
				<text
				                style="position: absolute;
								z-index: 99;
				                right: 50rpx;
								margin-top:-75rpx;
				                font-size:24rpx;
				                color: #999;">{{ start }}/10</text>
			<textarea placeholder="请输入与成功案例,不超过50字" maxlength="50" @input="descInputarea" 
                v-model="dataInfoarea"></textarea>
				<text
				                style="position: absolute;
								z-index: 99;
				                right: 50rpx;
								margin-top:-70rpx;
				                font-size:24rpx;
				                color: #999;">{{ startarea }}/50</text>
		</view>
		</view>
		<view class="case-detail">
		<view class="form-detail " >
			<view class="l-m-b l-m-l f-w-b flex">
				<text class="case-dot f-l"></text>
				<text class="case-text f-l">成功案例二</text>
			</view>
					
		</view>
		<view class="case-p bg-white p-15">
			<input placeholder="请输入个人标签,10个字以内" class=" c-l m-10 " maxlength="10" @input="descInputtwo" 
		        v-model="dataInfotwo"/>
				<text
				                style="position: absolute;
								z-index: 99;
				                right: 50rpx;
								margin-top:-75rpx;
				                font-size:24rpx;
				                color: #999;">{{ starttwo }}/10</text>
			<textarea placeholder="请输入与成功案例,不超过50字" maxlength="50" @input="descInputareatwo" 
		        v-model="dataInfoareatwo"></textarea>
				<text
				                style="position: absolute;
								z-index: 99;
				                right: 50rpx;
								margin-top:-70rpx;
				                font-size:24rpx;
				                color: #999;">{{ startareatwo }}/50</text>
		</view>
		<view class="uni-form-item uni-column in-text b-t-n b-u-c m-15 m-t-30 c-l m-b-30" style="padding-bottom: 30px;">
			<button> 完成</button>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				start: 0,
				dataInfo: '',
				
				startarea: 0,
				dataInfoarea: '',
				starttwo: 0,
				dataInfotwo: '',
				
				startareatwo: 0,
				dataInfoareatwo: '',
			}
		},
		methods: {
			descInput() {
						let txtVal = this.dataInfo.length;
						this.start = txtVal;
			},
			descInputarea() {
						let txtValarea = this.dataInfoarea.length;
						this.startarea = txtValarea;
			},
			descInputtwo() {
						let txtValtwo = this.dataInfotwo.length;
						this.starttwo = txtValtwo;
			},
			descInputareatwo() {
						let txtValareatwo = this.dataInfoareatwo.length;
						this.startareatwo = txtValareatwo;
					},
		}
	}
</script>

<style lang="less" scoped>
@import '@/static/css/common.css';
.form-detail{ background: #fff; font-size: 32rpx;  height: 88rpx; line-height: 88rpx;
input{ height: 88rpx; line-height: 88rpx; color: #999; font-size: 16px;}
}
.l-m-b{ display: flex;
uni-image{ max-height: 35rpx;max-width: 40rpx; margin-top: 30rpx;}
}
.img-s{ height: 35px; width: 35px;}
.l-m-l{ float: left; padding-left: 35rpx;}
.l-m-r{ float: right; padding-right: 35rpx;height: 88rpx; line-height: 88rpx;  text-align: right; display: ;}
.case-p{ 
input{ margin-bottom: 10px; background: #f8f8f8; padding-left: 10px;  height: 50px; line-height: 50px;}
textarea{ margin-bottom: 10px; background: #f8f8f8; padding:10px 10px; width: 100%;}
}
.case-dot{ height: 5px; width: 5px; background: #EA3457; border-radius: 5px;  margin-top: 20px; margin-left: -15px; margin-right: 10px;}
</style>
